import React, { useEffect, useState } from 'react'
import { connect } from 'react-redux'
import { MyState, ArticleItem } from '../../type/router.d'
import { Dispatch, bindActionCreators } from 'redux'
import * as Action from '../../store/modules/action'
import request from '../../utils/request'
import '../../api/mock'
import './article.css'
import { HeartOutlined, EyeOutlined, ShareAltOutlined } from '@ant-design/icons'
import { useHistory } from 'react-router-dom'
// 轮播图
import { Carousel } from 'antd';
import { getArticleList } from '../../api/index'

interface Iprops {
  GetArticleList(obj: ArticleItem[]): void, // 获取数据仓库方法
  articleList: ArticleItem[], //文章列表
  changeIndex(obj: string): void, //tab切换
  articleTabList: ArticleItem[],//点击切换数据
  GetXiangList(obj: object): void, //获取详情页数据
  // GetLbtList(obj: ArticleItem[]): void, //获取轮播图数据
  // lbtList: ArticleItem[], //轮播图数据
  getXiangLb(obj: object): void,
  addZan(item:object):void,
  addLook(item:object):void,
}

export const Index = (props: Iprops) => {
  const history = useHistory();
  const { GetArticleList, articleList, changeIndex, articleTabList, GetXiangList, getXiangLb,addZan,addLook } = props;
  useEffect(() => {
    // 获取数据
    if (!articleList.length) {
      request.get('/article').then(res => {
        GetArticleList(res.data.data); //获取所有的数据
        changeIndex('所有'); //刚进页面显示所有数据
      })
    }
    // 获取轮播图数据
    // request.get('/lbtList').then(res => {
    //   console.log(res.data.data);
    //   GetLbtList(res.data.data);
    // })
  }, [])
  // 轮播图点击事件
  const onChange = (currentSlide: number) => {
    console.log(currentSlide);
  };
  // lbtList
  // tab切换数据
  const tabList = ['所有', '前端', '后端', '阅读', 'Linux', 'LeetCode', '要闻'];
  // tab默认下标
  // const [activeTab, setactiveTab] = useState(0);
  const [activeTab, setactiveTab] = useState(() => {
    return 0
  })
  // 详情数据
  const getXiang = (item: ArticleItem) => {
    console.log(item);
    GetXiangList(item);
  }
  // 请求接口
  const [list, setList] = useState([]);
  useEffect(() => {
    getArticleList().then((res: any) => {
      console.log(res.data.data[0]);

      setList(res.data.data[0]);
    })
  }, [])
  // 点赞
  const zan = (item:object) => {
    addZan(item)
  }
  // 阅读
  const look = (item:object) => {
    addLook(item)
  }
  console.log(list)
  return (
    // 文章最大页面
    <div className='Article'>
      {/* 中间，最大页面 */}
      <div className="mainArticle">
        {/* 左部分 */}
        <div className="left">
          {/* 左上角轮播图部分 */}
          <div className="leftTop">
            <Carousel afterChange={onChange} autoplay>
              {list.length && list.map((item: any, index: number) => {
                return <div key={index} className='lbtDiv'
                  onClick={() => {
                    getXiangLb({
                      id: item.id,
                      img: item.cover,
                      title: '标题',
                      zan: item.likes,
                      time: item.publishAt,
                      con: item.title,
                    }); //详情数据
                    history.push(`/xiangLb/${item.id}`); //跳转详情页
                  }}
                >
                  <img src={item.cover} alt="" />
                </div>
              })}
            </Carousel>
          </div>
          {/* 左下：数据列表 */}
          <div className="leftBot">
            {/* 左下：tab切换 */}
            <div className="leftBotTab">
              {tabList.length && tabList.map((item, index) => {
                return <li key={index} className={index === activeTab ? 'activeTab' : ''} onClick={() => {
                  setactiveTab(index); //改变下标
                  changeIndex(tabList[index]); //点击切换数据
                }}>
                  {item}
                </li>
              })}
            </div>
            {/* 左下：数据列表 */}
            <div className="leftBotMain">
              {articleTabList.length ? articleTabList.map((item, index) => {
                return <div key={index} className='ListDiv'>
                  <div className='mainLeft'>
                    <div className="mainLeftTop">
                      <span className='titleList' onClick={() => {
                        getXiang(item); //详情数据
                        look(item);
                        history.push(`/xiang/${item.id}`); //跳转详情页
                      }}>{item.title}</span> &emsp;
                      <span>{item.time}个月前</span> &emsp;
                    </div>
                    <div className="mainLeftCen">
                      <p>{item.con}</p>
                    </div>
                    <div className="mainLeftBot">
                      <span onClick={()=>zan(item)}><HeartOutlined />{item.zan}&emsp;·&emsp;</span>
                      <span><EyeOutlined />{item.look}&emsp;·&emsp;</span>
                      <span><ShareAltOutlined /></span>
                    </div>
                  </div>
                  <div className='mainRight'>
                    <img src={item.img} alt="" />
                  </div>
                </div>
              }) : '暂无数据'}
            </div>
          </div>
        </div>
        {/* 右部分 */}
        <div className="right">
          {/* 右上 */}
          <div className="rightTop">
            <div className="rightTopH">
              <h3>推荐阅读</h3>
            </div>
            <div className="rightTopList">
              {articleTabList.length ? articleTabList.map((item, index) => {
                return <li key={index} onClick={() => {
                  getXiang(item); //详情数据
                  history.push(`/xiang/${item.id}`); //跳转详情页
                }}>{item.title}</li>
              }) : '暂无数据'}
            </div>
          </div>
          {/* 右下 */}
          <div className="rightBot">
            <div className="rightTopH">
              <h3>文章标签</h3>
            </div>
            <div className="rightBotList">
              <span>vue1</span>
              <span>vue2</span>
              <span>vue3</span>
              <span>react</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

const mapStateToProps = (state: MyState) => ({
  articleList: state.articleList,
  articleTabList: state.articleTabList,
  lbtList: state.lbtList,
})

const mapDispatchToProps = (dispatch: Dispatch) => {
  return {
    ...bindActionCreators(Action, dispatch)
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Index)